<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>截屏</title>
    <link type="text/css" rel="stylesheet" href="../node_modules/cropper.css">
    <style>
        body{
            overflow: hidden;
        }
        #imgBox img {
            width: 100%;
        }
        .localUpload{
            display: none;
        }
    </style>
</head>
<body>
<div id="imgBox"><img id="screenImg" src="" /></div>
<!--上传本地图片-->
<input class="localUpload" type="file"/>
<script src="../JS/jquery-2.0.3.js"></script>
<script src="../node_modules/cropper.js"></script>
<script>
    $(function () {
        $('#screenImg').load(function() {
            initCropped()
        });
    })
    function getCroppedCanvas() {
        return $('#screenImg').cropper("getCroppedCanvas").toDataURL("image/png",0.8);
    }

    function destroyCropped() {
        $('#screenImg').cropper("destroy");
    }

    function initCropped() {
        $('#screenImg').cropper({
            aspectRatio: bl,
            viewMode:1,
        });
    }

</script>
</body>
</html>